Возьмите мышкой за желтый кружок в центре цветочка и потяните в любую сторону. С цветочка также можно обрывать лепестки.

В этой статье мы представляем вашему внимаю пример использования JavaScript библиотеки KineticJS, использующей HTML5 Canvas для создания интерактивных приложений. Изображение цветочка перетаскивается в разные стороны, с него можно обрывать лепестки, таскать их по всему полю, возвращать на место. При этом стебель наклоняется и растягивается в длину. Весьма необычно и впечатляюще. Ну и, конечно, самое главное, все это достигается довольно простым и небольшим по объему кодом, с которым мы вас с удовольствием познакомим.

Как же сделано это чудо? Здесь используется тегc <canvas> и JavaScript библиотека kinetic-v3.7.2.

Для начала присоеденим библиотеку.

CODE:

Далее, между тегами <script></script> пропишем следующий код:

CODE:

   
        function drawLine(flower, lineLayer){
            var stage = flower.getStage();
            var context = lineLayer.getContext();
 
            context.save();
            context.beginPath();
            lineLayer.clear();
            context.strokeStyle = "green";
            context.lineWidth = 10;
            context.moveTo(flower.x, flower.y);
            context.lineTo(stage.width / 2, stage.height + 10);
            context.fill();
            context.stroke();
            context.closePath();
            context.restore();
        }
 
        window.onload = function(){
            var stage = new Kinetic.Stage("container", 578, 200);
            var flowerLayer = new Kinetic.Layer();
            var lineLayer = new Kinetic.Layer();
            var flower = new Kinetic.Group();
 
            // build center
            var center = new Kinetic.Shape(function(){
                var context = this.getContext();
                context.beginPath();
                context.lineWidth = 4;
                context.fillStyle = center.color;
                context.arc(0, 0, 20, 0, 2 * Math.PI, false);
                context.fill();
                context.stroke();
                context.closePath();
            });
 
            // add custom property
            center.color = "yellow";
 
            center.on("mousedown", function(){
                flower.draggable(true);
                document.body.style.cursor = "pointer";
            });
            center.on("mouseover", function(){
                this.color = "orange";
                flowerLayer.draw();
            });
            center.on("mouseout", function(){
                this.color = "yellow";
                flowerLayer.draw();
            });
 
            // build petals
            var numPetals = 10;
            for (var n = 0; n < numPetals; n++) {
                (function(){
                    var petal = new Kinetic.Shape(function(){
                        var context = this.getContext();
                        context.globalAlpha = 0.8;
                        context.beginPath();
                        context.lineWidth = 4;
                        context.fillStyle = petal.color;
                        context.moveTo(-5, -20);
                        context.bezierCurveTo(-40, -90, 40, -90, 5, -20);
                        context.fill();
                        context.stroke();
                        context.closePath();
                    });
 
                    // add custom property
                    petal.color = "#00dddd";
 
                    petal.draggable(true);
 
                    petal.on("dragstart", function(){
                        this.moveToTop();
                        center.moveToTop();
                    });
                    petal.on("mouseover", function(){
                        this.color = "blue";
                        flowerLayer.draw();
                    });
                    petal.on("mouseout", function(){
                        this.color = "#00dddd";
                        flowerLayer.draw();
                    });
 
                    var rotation = 2 * Math.PI * n / numPetals;
                    petal.setRotation(rotation);
 
                    flower.add(petal);
                }());
            }
 
            stage.on("mouseup", function(){
                flower.draggable(false);
                document.body.style.cursor = "default";
            });
 
            flower.on("dragmove", function(){
                drawLine(this, lineLayer);
            });
 
            flower.add(center);
            flower.setPosition(stage.width / 2, stage.height / 2);
            flowerLayer.add(flower);
 
            stage.add(lineLayer);
            stage.add(flowerLayer);
 
            drawLine(flower, lineLayer);
        };
    

Теперь в теле документа пропишем следующее:

CODE:

<body onmousedown="return false;">      
<div id="container">      
</div>  
</body>

Оригинал статьи на английском языке: www.html5canvastutorials.com

Комментарии ВКонтакте